<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Earthquake symbol layers</title>
<style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
</style>

<link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">
<script src="https://js.arcgis.com/4.0/"></script>

<script>
  require([
    "esri/Map",
    "esri/views/SceneView",
    "esri/layers/GraphicsLayer",
    "esri/geometry/Point",
    "esri/symbols/IconSymbol3DLayer",
    "esri/symbols/PointSymbol3D",
    "esri/Graphic",
    "esri/request",
    "esri/config",
    "dojo/_base/array",
    "dojo/domReady!"
  ], function (Map, SceneView, GraphicsLayer, Point, IconSymbol3DLayer, PointSymbol3D, Graphic, esriRequest, esriConfig, arrayUtils){

    esriConfig.request.corsEnabledServers.push("http://earthquake.usgs.gov");

    var lastHour = "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson";
    var last24hrs = "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson";
    var last7days = "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson";
    var last30days = "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson";

    var clippingExtent = {
      xmax: -12741021,
      xmin: -13368167,
      ymax: 4258147,
      ymin: 3756675,
      spatialReference: { wkid: 3857 }
    };

    var pTemplate = {
      title: "{title}",
      content: "<b>Location:</b> {place}<br>" +
        "<b>Date and time:</b> {time}<br>" +
        "<b>Magnitude (0-10): </b> {mag}<br>" +
        "<b>Intensity (1-10): </b> {mmi}<br>" +
        "<b>Depth: </b> {depth} km<br>" +
        "<b>Number who reported feeling the quake: </b> {felt}<br>" +
        "<b>Significance: </b> {sig}<br><br>" +
        "<a href='{url}'>View more information provided by the USGS</a>",
      fieldInfos: [{
        fieldName: "time",
        format: {
          dateFormat: "shortDateShortTime"
        }
      }, {
        fieldName: "felt",
        format: {
          digitSeparator: true,
          places: 0
        }
      }]
    };

    var initCam = {
      heading: 17.8,
      tilt: 113.6,
      position: {
        latitude: 35.729,
        longitude: -96.925,
        z: -20027,
        spatialReference: { wkid: 3857 }
      }
    };

    /**************************************************
    * Define symbols for earthquakes
    **************************************************/

    //Quakes symbol color on the surface
    var surfaceSym = new PointSymbol3D({
      symbolLayers: [
        new IconSymbol3DLayer({
          material: { color: [ 219,53,53,0.5 ] },
          resource: { primitive: "circle" },
          size: 20
        }),
        new IconSymbol3DLayer({
          material: { color: [ 219,53,53,1 ] },
          resource: { primitive: "circle" },
          size: 8,
          outline: {
            color: "white",
            size: 0.5
          }
        }),
        new IconSymbol3DLayer({
          material: { color: [ 0,0,0,0 ] },
          resource: { primitive: "circle" },
          size: 50,
          outline: {
            color: "black",
            size: 0.5
          }
        })
      ]
    });

    /**************************************************
    * Create graphics with returned geojson data
    **************************************************/

    function getData(response){
      var geojson = response.data.features;
      return arrayUtils.map(geojson, function(feature){
        if(feature.geometry.coordinates[2] < 0){
          feature.geometry.coordinates[2] *= -1;
        }
        feature.properties.depth = feature.geometry.coordinates[2];
        return new Graphic({
          geometry: new Point({
            latitude: feature.geometry.coordinates[1],
            longitude: feature.geometry.coordinates[0],
            z: feature.geometry.coordinates[2] * (-1000),
            spatialReference: { wkid: 3857 }
          }),
          attributes: feature.properties,
          symbol: surfaceSym,
          popupTemplate: pTemplate
        });
      });
    }

    //Executes if data retrevial was unsuccessful.
    function errback(error){
      console.error("Retreving data failed. ", error);
    }

    var map = new Map({
      basemap: "topo"
    });

    //Create SceneView
    var view = new SceneView({
      container: "viewDiv",
      map: map,
      extent: clippingExtent
    });

    //Layer for quakes on the surface
    var quakesSurface = new GraphicsLayer({
      elevationInfo: {
        mode: "on-the-ground"
      }
    });

    //Add features to both quakes layers
    function addToLayer(graphics){
      quakesSurface.addMany(graphics);
      map.add(quakesSurface);
    }

    //Request the earthquake data from USGS
    view.then(function(){
      esriRequest(last7days, {
        handleAs: "json"
      }).then(getData, errback).then(addToLayer);
    });
  });
</script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>